<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flatMap</title>
  <script>

    /** 
     * flatMap(callback,[thisArg])方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。
     * 它与 map 连着深度值为 1 的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。
     * 返回值，一个新的数组，其中每个元素都是回调函数的结果，并且结构深度 depth 值为 1。
     */

    const array = ['hello today the weather good!'];

    // 将每个单词转为一个元素到另一个数组中
    // 这里我们可以使用 join 先将数组转为以空格分格的字符串，在使用字符串的split转为数组
    const array2 = array.join(" ").split(" ");
    console.log(array2); // ['hello', 'today', 'the', 'weather', 'good!']
    // 但是这需要使用两个方法，还有字符串的知识，略显麻烦
    // 可以使用数组的方法将元素进行遍历,再使用split
    const array3 = array.map(el => el.split(" "));
    console.log(array3); // [['hello', 'today', 'the', 'weather', 'good!']]
    // 可以看出，这样虽然可以，但是确变成了一个二维数组，虽然可以使用flat方法，但是还是比较麻烦

    // 使用flatMap
    const array4 = array.flatMap(el => el.split(" "));
    console.log(array4); // ['hello', 'today', 'the', 'weather', 'good!']
    // flatMap返回的数组会自动 dep 一次
  </script>
</head>

<body>

</body>

</html>